<template>
  <div class="shop-wp">
    <Header title="购物车"></Header>
    <section>
      <Cart
        v-for="(item,index) in shopList"
        :select="selectAll"
        :key="index"
        :id="item.id"
        :cid="item.cid"
        v-model="cartData['item'+index]"
        :pirce="item.pirce"
        :name="item.name"
        :num="item.num"
        :avatar="item.avatar"
      ></Cart>
      <van-empty v-if="shopList&&!shopList.length" description="您的购物车暂无商品" />
    </section>
    <div class="footer">
      <van-submit-bar :price="pirceAll" button-text="提交订单" @submit="onClickButton">
        <van-checkbox
          :value="selectAll"
          @click="selectAll=!selectAll"
          @change="selChange"
          icon-size="25px"
        >全选</van-checkbox>
      </van-submit-bar>
    </div>

    <div v-if="isShow" class="zzc">
      <div class="wp">
        <h4>选择地址</h4>
        <div class="usergender-wp">
          <span>地址</span>
          <div style="width: 4rem;z-index:999;">
            <!-- <input type="text" @focus="isArea = true" /> -->
            <div class="areaText" @click="areaShow">{{user.area&&user.area.join('-')}}</div>
            <van-area v-show="isArea" :area-list="areaList" @confirm="areaFn" @cancel="cancelFn" />
          </div>
        </div>
        <div class="submits">
          <van-button type="primary" size="normal" @click="submitClk">确认购买</van-button>
          <van-button type="default" size="normal" @click="closeClk">取消购买</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import "@/css/main.css";
import Header from "@/components/Header";
import Cart from "@/components/cart";
import { Toast, Notify } from "vant";
import areaData from "@/utils/city.data-3";
import { mapActions, mapGetters, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      selectAll: false,
      cartData: {},
      pirceAll: 0,
      isShow: false,
      isArea: false,
      areaList: {}
    };
  },
  async mounted() {
    this.areaList = areaData;
    if (typeof this.user.area == "string") {
      this.user.area = JSON.parse(this.user.area || "[]");
    }
    await this.SET_UID(this.user.id);
    await this.getShop();
  },
  methods: {
    ...mapActions("shop", ["getShop", "delShop", "upnum"]),
    ...mapMutations("shop", ["SET_UID"]),
    onClickButton() {
      if (!this.pirceAll) {
        Toast("请选择好商品再结算");
        return;
      }
      this.isShow = true;
    },
    areaFn(e) {
      this.isArea = false;
      let arr = [];
      e.map((v, i) => {
        arr.push(v.name);
        if (i == 2) {
          this.user.areaCode = v.code;
        }
      });
      this.user.area = arr;
    },
    cancelFn() {
      this.isArea = false;
    },
    areaShow() {
      this.isArea = true;
    },
    selChange(e) {
      // console.log(e);
    },
    submitClk() {
      for (var k in this.cartData) {
        if (this.cartData[k].num == this.numData[k]) {
          this.delShop(this.cartData[k].id);
        } else {
          let data = {
            cid: this.cartData[k].cid,
            num: this.numData[k] * 1 - this.cartData[k].num * 1
          };
          this.upnum(data);
        }
      }
      Notify({ type: "success", message: "恭喜您购买成功" });
      this.closeClk();
    },
    closeClk() {
      this.isShow = false;
    }
  },
  components: {
    vanToast: Toast,
    vanNotify: Notify,
    Header,
    Cart
  },
  computed: {
    ...mapGetters(["user"]),
    ...mapState("shop", ["shopList", "numData"])
  },
  watch: {
    cartData: {
      handler(val) {
        let num = 0;
        let eNum = 0;
        for (var k in val) {
          if (val[k] && val[k].e) {
            num += val[k].pirce * 1;
            eNum++;
          }
        }
        eNum ? (this.pirceAll = (num + "00") * 1) : (this.pirceAll = 0);
        if (eNum == this.shopList.length) {
          this.selectAll = true;
        } else {
          this.selectAll = false;
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped src="../.././css/main.css"></style>
<style scoped>
.shop-wp {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.3rem;
  line-height: 1.5;
  color: #3d4145;
  background: #f7f7f7;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 0.77rem;
}

.zzc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

.wp {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
  width: 5.5rem;
  height: 5.5rem;
  background: #fff;
  z-index: 10000;
}

.wp h4 {
  margin-top: 0.1rem;
  text-align: center;
}

.usergender-wp {
  margin: 0.05rem auto;
  /* height: 0.77rem; */
  padding: 10px 16px;
  display: flex;
  height: 3.5rem;
  align-items: center;
}

.usergender-wp span {
  margin-right: 12px;
  font-size: 0.24rem;
}

.areaText {
  width: 4rem;
  height: 0.5rem;
  background-color: #ccc;
  text-align: center;
  line-height: 0.5rem;
}

.submits {
  display: flex;
  justify-content: space-around;
}
</style>